<template>
  <div>
    <div class="flexbetween bg_f9">
      <div class="flex f-12">
        <div
          v-for="(item, index) in tagList"
          :key="index"
          class="tagbg bg_fff mr-5"
          @click="handleTag(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="flex">
        <div class="mr-16" v-if="hasNo">
          编号从
          <el-input
            v-model="no"
            size="mini"
            placeholder=""
            style="width: 60px; margin: 0 5px"
          />
          开始
        </div>
        <span class="c_primary commhover" @click="handleCopy">复制</span>
      </div>
    </div>
    <el-input
      v-model="name"
      type="textarea"
      rows="10"
      :placeholder="placeholder"
      :maxlength="maxlength"
      id="messageInput"
      @input="handleInput"
    >
      <template v-slot:default="scope">
        <span v-html="highlightText(scope.data)"></span>
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      no: 1,
      name: "",
    };
  },
  props: {
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    maxlength: {
      type: Number,
      default: 999,
    },
    // 是否含有编号
    hasNo: {
      type: Boolean,
      default: false,
    },
    tagList: {
      //标签list
      type: Array,
      default: [],
    },
  },
  watch: {
    value: {
      handler(val) {
        this.name = val;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleTag(item) {
      var elInput = document.getElementById("messageInput");
      var startPos = elInput.selectionStart;
      var endPos = elInput.selectionEnd;
      var text = elInput.value;
      if (startPos === undefined || endPos === undefined) {
        return;
      }
      var result =
        text.substring(0, startPos) + item.value + text.substring(endPos);
      //重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + item.value.length;
      elInput.selectionEnd = startPos + item.value.length;
      elInput.value = result;
      this.name = result;
      this.handleInput()
    },

    handleCopy() {
      this.copy(this.name);
    },

    highlightText(text) {
      console.log("text:", text);
      // 假设我们要标记的词是 "样式"
      const keyword = "{{当前群名}}";
      const regex = new RegExp(keyword, "g");
      return text.replace(
        regex,
        `<span class="commtag maintag">${keyword}</span>`
      );
    },

    handleInput() {
      this.$emit("input", this.name);
    },
  },
};
</script>
<style lang="scss" scoped>
.bg_f9 {
  background-color: #f9f9f9;
  padding: 6px 18px;
  border: 1px solid #e9e9e9;
  border-bottom: 0;
}
.tagbg {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  color: #666;
  padding: 3px 8px;
  line-height: 20px;
}
.el-textarea {
  ::v-deep .el-textarea__inner {
    border-radius: 0;
    border-color: #e9e9e9;
  }
}
</style>